<template>
  <div class="container">
    <el-card class="box-card">
      <div class="clearfix">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button
          @click="addQuestions"
          icon="el-icon-edit"
          style="float: right"
          size="small"
          type="success"
          >新增试题</el-button
        >
      </div>
      <el-form ref="formData" :model="ruleForm" label-width="80px" size="small">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                @visible-change="getSubject"
                @change="subjectChange"
                v-model="ruleForm.subjectID"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in formData.subject"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="ruleForm.catalogID" placeholder="请选择">
                <el-option
                  v-for="item in formData.directorys"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="ruleForm.tags" placeholder="请选择">
                <el-option
                  v-for="item in formData.tags"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model.trim="ruleForm.keyword" placeholder="根据题干搜索"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                @visible-change="questionType"
                v-model="ruleForm.questionType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in formData.questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                @visible-change="difficulty"
                v-model="ruleForm.difficulty"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in formData.difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                @visible-change="direction"
                v-model="ruleForm.direction"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in formData.direction"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                @visible-change="usersSimple"
                v-model="ruleForm.creatorID"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in formData.creatorID"
                  :key="item.id"
                  :label="item.username"
                  :value="item.username"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model.trim="ruleForm.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model.trim="ruleForm.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                @visible-change="provinces"
                v-model="ruleForm.provinces"
                style="width: 48%; margin-right: 4%"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in formData.provinces"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select v-model="ruleForm.citys" style="width: 48%" placeholder="请选择">
                <el-option
                  v-for="(item, index) in formData.citys"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button size="small" @click="eliminate">清除</el-button>
              <el-button size="small" type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-alert :title="`数据一共${total}条`" type="info" :closable="false" show-icon> </el-alert>

      <el-table
        :header-cell-style="{ 'border-bottom': '2px solid #e8e8e8' }"
        style="width: 100%"
        :data="tableData"
      >
        <el-table-column prop="number" label="试题编号" width="120"> </el-table-column>
        <el-table-column prop="subject" label="学科"> </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column label="题型">
          <template #default="{ row }">
            {{ formatQuestionType(row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column label="题干" min-width="180">
          <template #default="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template #default="{ row }">
            {{ formatDifficulty(row.difficulty) }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120"> </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button
              @click="preview(row)"
              size="small"
              plain
              type="primary"
              icon="el-icon-view"
              circle
            ></el-button>
            <el-button
              @click="edit(row.id)"
              size="small"
              plain
              type="success"
              icon="el-icon-edit"
              circle
            ></el-button>
            <el-button
              @click="remove(row)"
              size="small"
              plain
              type="danger"
              icon="el-icon-delete"
              circle
            ></el-button>
            <el-button
              @click="choiceAdd(row)"
              size="small"
              plain
              type="warning"
              icon="el-icon-check"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <questions-preview
        :dialog-visible="dialogVisible"
        :row="dialogInfo"
        @close-dialog="closeDialog"
      ></questions-preview>

      <div style="margin-top: 20px; text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="params.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { list, choiceAdd, remove } from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simples as directorysSimple } from '@/api/hmmm/directorys.js'
import { simpless as togsSimple } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple as usersSimple } from '@/api/base/users.js'
import * as dayjs from 'dayjs'
import QuestionsPreview from '@/module-hmmm/components/questions-preview'

export default {
  components: {
    QuestionsPreview
  },

  data() {
    return {
      tableData: [],

      formData: {
        subject: [],
        directorys: [],
        tags: [],
        questionType: [],
        difficulty: [],
        direction: [],
        creatorID: [],
        provinces: [],
        citys: []
      },

      ruleForm: {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        remarks: '',
        shortName: '',
        creatorID: '',
        provinces: '',
        citys: ''
      },

      params: {
        page: 1,
        pagesize: 5
      },

      total: 0,

      dialogVisible: false,
      dialogInfo: {}
    }
  },

  mounted() {
    this.getList()
    this.ruleForm = {}
  },

  methods: {
    async getList() {
      const res = await list(this.params)
      // console.log(res)
      // console.log(res.data.items)
      this.tableData = res.data.items
      this.params.page = Number(res.data.page)
      this.params.pagesize = Number(res.data.pagesize)
      this.total = res.data.counts
    },

    // 搜索功能
    async search() {
      // const res = await list(this.ruleForm.keyword)
      // console.log(res)
      this.params.subjectID = this.ruleForm.subjectID
      this.params.keyword = this.ruleForm.keyword
      this.getList()
    },

    // 清除
    eliminate() {
      this.ruleForm = {}
      this.params = {}
      this.getList()
    },

    // 预览
    preview(row) {
      this.dialogVisible = true
      this.dialogInfo = row
    },

    // 关闭弹框
    closeDialog() {
      this.dialogVisible = false
    },

    // 添加精选
    choiceAdd(row) {
      // console.log(row)
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        const data = {}
        data.choiceState = 1
        data.id = row.id
        await choiceAdd(data)
        this.getList()
        this.$message({
          type: 'success',
          message: '加入精选成功!'
        })
      })
    },

    // 删除
    remove(row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },

    // 修改
    edit(id) {
      this.$router.push({ path: '/questions/new', query: { id } })
    },

    // 学科
    async getSubject() {
      const subject = await simple()
      // console.log(subject)
      this.formData.subject = subject.data
    },

    // 学科选择完后触发的事件
    async subjectChange() {
      // console.log(this.ruleForm.subject)
      const res = await directorysSimple(this.ruleForm)
      // console.log(res)
      this.formData.directorys = res.data
      this.togsSimple()
    },

    // 获取标签
    async togsSimple() {
      const res = await togsSimple(this.ruleForm)
      // console.log(res)
      this.formData.tags = res.data
    },

    // 试题类型
    questionType() {
      this.formData.questionType = questionType
    },

    // 难度
    difficulty() {
      this.formData.difficulty = difficulty
    },

    // 方向
    direction() {
      this.formData.direction = direction
    },

    // 录入人
    async usersSimple() {
      const res = await usersSimple()
      // console.log(res)
      this.formData.creatorID = res.data
    },

    // 城市
    provinces() {
      this.formData.provinces = provinces()
      this.citys()
    },

    // 地区
    citys() {
      this.formData.citys = citys(this.ruleForm.provinces)
    },

    // 表格题型格式化
    formatQuestionType(type) {
      // console.log(questionType)
      // console.log(type)
      const map = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return map[type]
    },

    // 难度格式化
    formatDifficulty(type) {
      const map = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return map[type]
    },

    // 时间格式化
    formatDate(value, str = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(value).format(str)
    },

    // 新增试题
    addQuestions() {
      this.$router.push('/questions/new')
    },

    // 分页
    handleCurrentChange(val) {
      // console.log(val)
      this.params.page = val
      this.getList()
    },

    handleSizeChange(val) {
      this.params.pagesize = val
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  margin: 10px 7px;
  .clearfix span {
    font-size: 12px;
    color: pink;
  }
  .el-row {
    margin-bottom: 20px;
    margin-top: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    .el-form-item .el-select {
      width: 100%;
    }
  }
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 2px solid #ccc;
}
</style>
